<style>
    .layui-form-pane .layui-form-label {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<div class="main-container">
    <h5>权限设置</h5>
    <div class="layui-form-item">
        <label class="layui-form-label">驳回权限：</label>
        <div class="layui-input-block">
            <select lay-filter="backPermission" name="back_permission">
                <option value="1" selected>允许</option>
                <option value="0">禁止</option>
            </select>
        </div>
    </div>

    <h5>审批人员</h5>
    <div class="layui-form-item">
        <label class="layui-form-label">选择类型：</label>
        <div class="layui-input-block">
            <select lay-filter="scope" name="scope">
                <option value="1" selected>指定人员</option>
                <option value="2">指定分组</option>
                <option value="3">表单用户</option>
                <option value="4">直属主管</option>
                <option value="5">申请人</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审批人员：</label>
        <div class="layui-input-block">
            <div id="assessing"></div>
        </div>
    </div>
    <h5>审批模式</h5>
    <div class="layui-form-item">
        <label class="layui-form-label">任务类型：</label>
        <div class="layui-input-block">
            <select lay-filter="taskType" name="task_type">
                <option value="Major" selected>主办任务</option>
                <option value="Aidant">协办任务</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">参与类型：</label>
        <div class="layui-input-block">
            <select lay-filter="performType" name="perform_type">
                <option value="ANY" selected>普通参与</option>
                <option value="ALL">会签参与</option>
            </select>
        </div>
    </div>
</div>
<script>

    const APPROVE_API = lms_config.api_url + "/adminapi/wf/designer/approve/list";
    const APPROVE_INFO_API = lms_config.api_url + "/adminapi/wf/designer/approve/get";


    layui.use(['element', 'jquery', 'form', 'util', 'xmSelect'], function () {
        let form = layui.form
        let util = layui.util
        let xmSelect = layui.xmSelect
        let $ = layui.jquery


        form.on('select(backPermission)', function (data) {
            let elem = data.elem; // 获得 select 原始 DOM 对象
            let value = data.value; // 获得被选中的值
            let othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            propertyKeysSet()
        });

        form.on('select(scope)', function (data) {
            //切换类型清空已选择审批人
            assessing.setValue([])
            //切换类型清空搜索的data
            assessing.update({
                data: []
            })
            propertyKeysSet()
        });

        let assessing = layui.xmSelect.render({
            el: '#assessing',
            name: 'assignee',
            filterable: true,
            remoteSearch: true,
            paging: true,//开启分页
            pageRemote: true,//远程分页
            pageEmptyShow: false,//没有数据不展示分页
            prop: {
                name: 'name',
                value: 'value',
            },
            remoteMethod: function (val, cb, show, pageIndex) {
                let forms = form.val('panel-form')
                $.ajax({
                    url: APPROVE_API, // test.html文件的路径
                    type: 'GET',
                    dataType: 'json',
                    data: {scope: forms.scope, search: val, limit: 5, page: pageIndex},
                    success: function (ret) {
                        let data = ret.data['list'] != undefined ? ret.data['list'] : []
                        let size = Math.ceil(ret.data['count'] / 5)
                        cb(data, size)
                    },
                    error: function (ret) {
                        cb([], 0)
                    }
                });
            },
            data: [],
            on: function (data) {
                let arr = data.arr
                let stringArr = []
                $.each(arr, function (index, item) {
                    stringArr.push(item.value)
                });
                $('input[name="assignee"]').val(stringArr.join(','))
                propertyKeysSet()
            }
        })

        /**
         * 获取审批人员
         */
        $(document).ready(function () {
            let forms = independentProcessing()
            let param = {
                scope: forms.scope,
                search: forms.assignee,
            }
            $.ajax({
                url: APPROVE_INFO_API,
                type: 'GET',
                dataType: 'json',
                data: param,
                success: function (ret) {
                    let data = ret.data['list'] != undefined ? ret.data['list'] : []
                    assessing.setValue(data);
                    let stringArr = [];
                    $.each(data, function (index, item) {
                        stringArr.push(item.value)
                    })
                    //初始化必须重新赋值要不数据丢失
                    $('input[name="assignee"]').val(stringArr.join(','))
                },
                error: function (ret) {
                    assessing.setValue([]);
                }
            });
        });
        form.render();
    })
</script>
